<template>
	<view class="content" :style="{backgroundColor: template.color.back_color}">
		<view class="details_box" v-if="goodsInfo">

			<view v-if="goodsInfo.orderStatus==7" class="order_head_box">
				<view class="status">
					<uv-icon name="close-circle-fill" color="#000" size="28"></uv-icon>
					<span>已失效</span>
				</view>
				<view class="text">
					<span v-if="goodsInfo.orderExpireRemainTime<=0">订单已关闭，如有退款将会原路退回</span>
					<span v-else>订单因超时未支付，已被自动取消</span>
				</view>
			</view>
			<view v-if="goodsInfo.orderStatus==8" class="order_head_box">
				<view class="status">
					<span>申请退款中</span>
				</view>
			</view>
			<view v-if="goodsInfo.orderStatus==9" class="order_head_box">
				<view class="status">
					<span>退款成功</span>
				</view>
			</view>
			<view v-if="goodsInfo.orderStatus==10" class="order_head_box">
				<view class="status">
					<span>退款失败</span>
				</view>
			</view>
			<view v-if="goodsInfo.orderStatus==0" class="order_head_box">
				<view class="status">
					<uv-icon name="clock-fill" color="#000" size="28"></uv-icon>
					<span>待付款</span>
				</view>
				<view class="text">
					<span>请在</span>
					<uv-count-down :time="goodsInfo.orderExpireRemainTime*1000" format="mm:ss"></uv-count-down>
					<span>内完成支付，否则订单将自动取消</span>
				</view>
			</view>
			<view v-else-if="goodsInfo.orderStatus==3" class="order_head_box">
				<view class="status">
					<aicon type="deliver_fill" :color="template.color.price_color" size="35"></aicon>
					<uv-icon name="clock-fill" color="#000" size="28"></uv-icon>
					<span>待收货</span>
				</view>
				<view class="text">
					<!-- <span>订单正在备货中，请耐心等待发货</span> -->
					<span>订单已发货，请注意接听快递来电</span>
				</view>
			</view>
			<view v-else-if="goodsInfo.orderStatus==2 && goodsInfo.logisticsType==1 " class="order_head_box">
				<view class="status">
					<uv-icon name="clock-fill" color="#000" size="28"></uv-icon>
					<span>待发货</span>
				</view>
				<view class="text">
					<span>订单正在备货中，请耐心等待配送</span>
					<!-- <span>订单已发货，请注意接听快递来电</span> -->
				</view>
			</view>
			<view v-else-if="goodsInfo.orderStatus==2 && goodsInfo.logisticsType==3 " class="order_head_box">
				<view class="status">
					<uv-icon name="clock-fill" color="#000" size="28"></uv-icon>
					<span>待自提</span>
				</view>
				<view class="text">
					<span>订单正在备货中，请及时到店自提</span>
					<!-- <span>订单已发货，请注意接听快递来电</span> -->
				</view>
			</view>
			<view v-else-if="goodsInfo.orderStatus==1" class="order_head_box">
				<view class="status">
					<uv-icon name="checkmark-circle-fill" color="#000" size="28"></uv-icon>
					<span>已付款</span>
				</view>
				<view class="text">
					<span>付款完毕，等待发货</span>
				</view>
			</view>
			<view class="menu_box box_shadow">
				<view class="head">
					<view class="left">
						<span>商品信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="goods_box">
					<view class="goods" v-for="(item, index) in goodsInfo.orderItemList" :key="item.id">
						<view class="left">
							<image v-if="item.goodsSpecification!==null"  :src="item.goodsSpecification.specificationImages" lazy-load="true"
								mode="aspectFill"></image>
							<image v-else  :src="item.previewUrl" lazy-load="true"
								mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="title">{{item.goodName}}</view>
							<view class="goodsSpecification" v-if="item.goodsSpecification!==null" >
								<view class="text"
									v-for="(value,key) in JSON.parse(item.goodsSpecification.specificationName)"
									:key="key">{{key+':'+value}}</view>
							</view>
							<view class="price">
								<view class="">
									<view class="num" v-if="item.goodsSpecification!==null" >{{item.goodsSpecification.dealPrice}}<span>元</span></view>
									<view class="num" v-else >{{item.goodsPrice}}<span>元</span></view>
								</view>
								
								<view class="buy">x{{item.goodsNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="goodsInfo.orderStatus==3&&goodsInfo.logisticsType==2 || goodsInfo.orderStatus==5&&goodsInfo.logisticsType==2">
				<view class="menu_box box_shadow">
					<view class="head">
						<view class="left">
							<span>收件信息</span>
						</view>
						<view class="right"></view>
					</view>
					<view class="info_box">
						<view class="label">
							<view class="tit">姓名</view>
							<view class="txt">{{addessData.name}}</view>
						</view>
						<view class="label">
							<view class="tit">电话</view>
							<view class="txt">{{addessData.mobile}}</view>
						</view>
						<view class="label">
							<view class="tit">地址</view>
							<view class="txt">
								{{addessData.province}}{{addessData.city}}{{addessData.district}}{{addessData.address}}
							</view>
						</view>
					</view>
				</view>
				<view class="menu_box box_shadow"  >
					<view class="head">
						<view class="left">
							<span>物流信息</span>
						</view>
						<view class="right"></view>
					</view>
					<view class="info_box">
						<view class="label">
							<view class="tit">物流公司</view>
							<view class="txt">{{goodsInfo.orderLogistics.expressName}}</view>
						</view>
						<view class="label">
							<view class="tit">物流单号</view>
							<view class="txt">{{goodsInfo.orderLogistics.expressNo}}</view>
						</view>
						<view class="" style="display: flex;justify-content: center;align-items: center;">
							<view style="width: 200rpx;">
								<uv-button  type="primary" :plain="true" text="查询物流信息"  @click="chaxun()"></uv-button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="menu_box box_shadow" v-if="goodsInfo.logisticsType==2" >
				<view class="head">
					<view class="left">
						<span>收件信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box">
					<view class="label">
						<view class="tit">姓名</view>
						<view class="txt">{{addessData.name}}</view>
					</view>
					<view class="label">
						<view class="tit">电话</view>
						<view class="txt">{{addessData.mobile}}</view>
					</view>
					<view class="label">
						<view class="tit">地址</view>
						<view class="txt1">
							{{addessData.province}}{{addessData.city}}{{addessData.district}}{{addessData.address}}{{addessData.houseNumber}}
						</view>
					</view>
				</view>
			</view> -->
			<view class="menu_box box_shadow" v-if="goodsInfo.logisticsType==3" >
				<view class="head">
					<view class="left">
						<span>自提信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box">
					<view class="label">
						<view class="tit">姓名</view>
						<view class="txt">{{addessData.name}}</view>
					</view>
					<view class="label">
						<view class="tit">电话</view>
						<view class="txt">{{addessData.mobile}}</view>
					</view>
					<view class="label">
						<view class="tit">店铺地址</view>
						<view class="txt">
							{{addessData.address}}
						</view>
					</view>
				</view>
			</view>
			<view class="menu_box box_shadow">
				<view class="head">
					<view class="left">
						<span>支付信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box" style="padding-bottom: 0;">
					<view class="label">
						<view class="tit">商品合计</view>
						<view class="txt">¥{{goodsInfo.totalMoney}}</view>
					</view>
					<view class="order_foot">
						<view class="label">
							<view class="tit">配送费</view>
							<view class="txt">¥{{goodsInfo.distributionFee}}</view>
						</view>
					</view>
					<view class="order_foot">
						<view class="label">
							<view class="tit">优惠金额</view>
							<view class="txt">¥{{goodsInfo.concessionalPrice}}</view>
						</view>
					</view>
					
					<view class="order_foot">
						<view class="label">
							<view class="tit">实际应付</view>
							<view class="txt">¥{{goodsInfo.payMoney}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="menu_box box_shadow">
				<view class="head">
					<view class="left">
						<span>订单信息</span>
					</view>
					<view class="right"></view>
				</view>
				<view class="info_box">
					<view class="label">
						<view class="tit">订单状态</view>
						<view class="txt">
							<span v-if="goodsInfo.orderStatus==0 ">待付款</span>
							<span v-else-if="goodsInfo.orderStatus==2 && goodsInfo.logisticsType==1 ">待配送</span>
							<span v-else-if="goodsInfo.orderStatus==2 && goodsInfo.logisticsType==3 ">待自提</span>
							<span v-else-if="goodsInfo.orderStatus==1">已付款</span>
							<span v-else-if="goodsInfo.orderStatus==3">待收货</span>
							<span v-else-if="goodsInfo.orderStatus==5">已完成</span>
							<span v-else-if="goodsInfo.orderStatus==7">已失效</span>
							<span v-else-if="goodsInfo.orderStatus==9">已退款</span>
						</view>
					</view>
					<view class="label" v-if="goodsInfo.payTime">
						<view class="tit">支付时间</view>
						<view class="txt">{{goodsInfo.payTime}}</view>
					</view>
					<view class="label">
						<view class="tit">下单时间</view>
						<view class="txt">{{goodsInfo.createTime}}</view>
					</view>
					<view class="label">
						<view class="tit">订单编号</view>
						<view class="txt">{{goodsInfo.orderNo}}</view>
					</view>
					<view class="label">
						<view class="tit">订单备注</view>
						<view class="">
							<view class="txt" v-if="goodsInfo.orderRemark!==''" >{{goodsInfo.orderRemark}}</view>
							<view class="txt" v-else >暂无备注</view>
						</view>
						
					</view>
					<view class="label" style="text-align: center;"
						v-if="goodsInfo.orderStatus==1 || goodsInfo.orderStatus==2"
						@click="Torefund(goodsInfo.orderNo)">
						<view class="refund-text">申请退款</view>
					</view>
				</view>
			</view>
		</view>

		<view class="seat_box">
			<view class="seat"></view>
		</view>
		<view class="footer box_shadow">
			<view class="label">
				<view v-if="goodsInfo.orderStatus==0" class="button" style="color: #da5000;" @click="getPaypalOrder()">立即支付</view>
				<view v-else-if="goodsInfo.orderStatus==7 " class="button" style="color: #da5000;">订单失效</view>
				<view v-else-if="goodsInfo.orderStatus==2 && goodsInfo.logisticsType==1" class="button" style="color: #da5000;">待配送</view>
				<view v-else-if="goodsInfo.orderStatus==2 && goodsInfo.logisticsType==3 " class="button" :style="{backgroundColor: template.color.temp_color}" @click="Confirmpickup()">确认自提</view>
				<view v-else-if="goodsInfo.orderStatus==3" class="button" style="color: #da5000;">待收货</view>
				<view v-else-if="goodsInfo.orderStatus==1" class="button" style="color: #da5000;">已付款</view>
				<view v-else-if="goodsInfo.orderStatus==5" class="button" style="color: #da5000;">已完成</view>
				<view v-else-if="goodsInfo.orderStatus==9" class="button" style="color: #da5000;">已退款</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsInfo:{},
				addessData: {},
			}
		},
		onLoad(option) {
			this.goodsInfo = JSON.parse(decodeURIComponent(option.info));
			this.addessData= JSON.parse(this.goodsInfo.orderLogistics.receiverAddressJson)
		},
		onShow() {
			let self = this;
		},
		methods: {
			Confirmpickup(){
				let self=this;
				let postData={
					verificationCodeStr:self.verCode
				}
				console.log(postData,'8995555555555')
				self.Post('/api/order/verificationOrder',postData).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'取货成功'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},600)
					}else{
						uni.showToast({
							title:res.msg
						})
					}
				})
			},
			chaxun(){
				uni.navigateTo({
					url: `/pages/order/queryOrder?orderId=${this.goodsInfo.id}`
				})
				
			},
			Torefund(i) {
				uni.navigateTo({
					url: `/pages/order/refund?id=${i}`
				})
			},
			
			getPaypalOrder() {
				setTimeout(()=>{
					uni.navigateTo({
						url: `/pages/money/pay?info=${encodeURIComponent(JSON.stringify(this.goodsInfo))}`
					})
				},300)
			},
			// confirmOrder() {
			// 	let self = this;
			// 	let id = self.goodsInfo.id;
			// 	uni.showLoading({title: '确认收货中', mask: true});
			// 	self.Get(self.Url.orderConfirm, {id: id}).then(res => {
			// 		if(res.code === 0){
			// 			uni.hideLoading();
			// 			uni.showToast({title: '确认收货成功'});
			// 			self.getgoodsInfo();
			// 		}else{
			// 			uni.hideLoading();
			// 			uni.showModal({
			// 				title: '确认收货失败',
			// 				content: res.msg,
			// 				showCancel: false
			// 			})
			// 		}
			// 	});
			// },
			// getOrderDel(){
			// 	let self = this;
			// 	uni.showModal({
			// 		title: '订单删除确认',
			// 		content: '订单删除后不可恢复，是否继续删除？',
			// 		success(ces){
			// 			if(ces.confirm){
			// 				let id = self.goodsInfo.id;
			// 				uni.showLoading({title: '准备删除中', mask: true});
			// 				self.Get(self.Url.orderDel, {id: id}).then(res => {
			// 					if(res.code === 0){
			// 						uni.hideLoading();
			// 						uni.showToast({title: '订单删除成功'});
			// 						self.$nextTick(function(){
			// 							uni.navigateBack();
			// 						})
			// 					}else{
			// 						uni.hideLoading();
			// 						uni.showModal({
			// 							title: '订单删除失败',
			// 							content: res.msg,
			// 							showCancel: false
			// 						})
			// 					}
			// 				})
			// 			}
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="less">
	.content {
		padding-bottom: 140rpx;
	}

	.details_box,
	.content {
		min-height: 100vh;
	}

	.order_head_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;

		.status {
			display: flex;
			align-items: center;
			color: #1c1c1c;
			font-size: 42rpx;
			font-weight: bold;
			line-height: 70rpx;

			aicon {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			span {
				padding-left: 10rpx;
			}
		}

		.text {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #666;
			padding-top: 20rpx;

			/deep/.u-count-down__text {
				font-size: 26rpx;
				color: #666;
				padding: 0 4rpx;
			}
		}
	}

	.menu_box {
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			width: 90%;
			margin: 0 auto;

			.left {
				color: #1c1c1c;
				font-size: 30rpx;
				font-weight: bold;
				line-height: 30rpx;
				display: flex;
				align-items: center;
			}

			.right {
				color: #999;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				line-height: 26rpx;
			}
		}

		.data {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			margin: 0 auto;
			width: 90%;
			color: #404040;
		}

		.goods_box {
			padding-bottom: 30rpx;

			.goods {
				width: 90%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 180rpx;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 20rpx;
					}
				}

				.right {
					flex: 1;
					min-width: 0;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.goodsSpecification {
						position: relative;
						display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
						-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
						-webkit-line-clamp: 2; //一个块元素显示的文本的行数
						overflow: hidden; //溢出隐藏

						.num {
							// position: absolute;
							// bottom: -70rpx;
							// left: 0;
						}
					}

					.title {
						color: #1c1c1c;
						font-size: 30rpx;
						height: 52rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.text {
						color: #999;
						font-size: 26rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						// padding-bottom: 10rpx;

						.num {
							color: #1c1c1c;
							font-size: 30rpx;
							display: flex;
							align-items: center;

							span {
								font-size: 28rpx;
								padding-left: 2rpx;
							}
						}

						.buy {
							color: #1c1c1c;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.info_box {
			padding: 10rpx 0 20rpx;

			.label {
				width: 90%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				margin-bottom: 30rpx;
				color: #666;

				.refund-text {
					width: 100%;
					text-align: center;
					color: #666;
				}

				.tit {
					width: 130rpx;
					color: #666;
				}

				.txt {
					flex: 1;
					min-width: 0;
					text-align: right;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #1c1c1c;
				}
				.txt1{
					flex: 1;
					min-width: 0;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}

			.order_foot {
				border-top: 1px solid #f5f5f5;

				.label {
					display: flex;
					align-items: center;
					width: 90%;
					margin: 0 auto;
					justify-content: space-between;
					height: 100rpx;
					font-weight: bold;
					font-size: 30rpx;
					margin-bottom: 0;

					.tit {
						color: #1c1c1c;
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.label {
			display: flex;
			align-items: center;
			// justify-content: center;
			height: 120rpx;
			width: 100%;

			.button {
				width: 92%;
				margin: 0 auto;
				height: 80rpx;
				border-radius: 100rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 32rpx;
				position: relative;

			}
		}
	}
</style>
